<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input type="text" id="txt" v-model="pp.msg" />
  <span id="sp" v-txt="pp.msg"></span>

  <script>
    // 属性选择器  获取到 input
    var txt = document.querySelector("[v-model='pp.msg']")
    // 为什么ref 是基本类型,reactive是对象或者数组

    let reactive = (obj) => {
      return new Proxy(obj, {
        get (target, prop) {
          return target[prop]
        },
        set (target, prop, val) {
          text = document.querySelector(`[v-txt='pp.${prop}']`)
          input = document.querySelector(`[v-model='pp.${prop}']`)
          // 当obj.msg被赋值时 同时设置给 input/span
          text.innerText = val
          input.value = val
          target[prop] = val
        }
      })
    }

    let pp = reactive({ msg: "张胜男" })
    txt.onkeyup = function (event) {
      pp.msg = txt.value
    }

  </script>
</body>

</html>